<template>
    <div class="container">
        <statistics-header header-title="延 迟 提 报 数 据 报 警"></statistics-header>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">报警信息</div>
                </div>
                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>
            </div>
            <Row>
                <Table :columns="tableColumns" height="800" :data="tableData" border :span-method="handleSpan">
                    <template slot-scope="{ row }" slot="btn">
                        <div class="action-button">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="updateForm01(row)">微信提示</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" @click="updateForm(row)">短信提示</Button>
                        </div>
                    </template>
                </Table>
            </Row>
            <br>
            <Row type="flex" justify="end">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
        <template>
            <Modal
                    v-model="modalShow"
                    title="发送预警"
                    @on-ok="ok"
                    @on-cancel="cancel">
                <Checkbox-group class="ivu-row">
                    <Checkbox value="twitter" class="ivu-col ivu-col-span-24">
                        <Icon type="social-twitter"></Icon>
                        <span style="margin-right: 10px">姓名：张** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6688</span>
                    </Checkbox>
                    <Checkbox value="facebook" class="ivu-col ivu-col-span-24">
                        <Icon type="social-facebook"></Icon>
                        <span style="margin-right: 10px">姓名：王** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：130****7788</span>
                    </Checkbox>
                    <Checkbox value="github" class="ivu-col ivu-col-span-24">
                        <Icon type="social-github"></Icon>
                        <span style="margin-right: 10px">姓名：李** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6578</span>
                    </Checkbox>
                    <Checkbox value="snapchat" class="ivu-col ivu-col-span-24">
                        <Icon type="social-snapchat"></Icon>
                        <span style="margin-right: 10px">姓名：赫** </span>
                        <span  style="margin-left: 10px">联系电话：138****5212</span>
                    </Checkbox>
                </Checkbox-group>
            </Modal>
        </template>
        <template>
            <Modal
                    v-model="modalShow01"
                    title="发送预警"
                    @on-ok="ok"
                    @on-cancel="cancel">
                <div class="wx-item">
                    <Checkbox :checked.sync="single"></Checkbox>
                    <div class="w-header">
                        <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/ssp/u=1966427531,3919367855&fm=11&gp=0.jpg" class="wx-header"/>
                        <span>测试的大青蛙</span>
                    </div>
                </div>
                <div class="wx-item">
                    <Checkbox :checked.sync="single"></Checkbox>
                    <div class="w-header">
                        <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/ssp/u=2151447830,1807870251&fm=11&gp=0.jpg" class="wx-header"/>
                        <span>阿米尼</span>
                    </div>
                </div>
            </Modal>
        </template>
    </div>
</template>
<script>
import {
// findrjryList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'

export default {
  components: { StatisticsHeader },
  data () {
    return {
      modalShow: false,
      modalShow01: false,
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '区县',
          key: 'id',
          align: 'center',
          width: 100,
          fixed: 'left'
        },
        {
          title: '项目',
          key: 'imp_date',
          align: 'center',
          width: 200
        },
        {
          title: '时间',
          key: 'age',
          align: 'center',
          children: [
            {
              title: '03-10 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-11 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-12 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-13 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-14 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-15 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-16 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-17 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-18 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-19 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-20 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-21 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-22 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-23 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-24 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-25 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-26 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-27 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-28 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-29 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-30 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '03-31 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            },
            {
              title: '04-01 12:00',
              key: 'jlsth',
              align: 'center',
              width: 90
            }
          ]
        },
        {
          title: '预警',
          slot: 'btn',
          align: 'center',
          width: 200,
          fixed: 'right'
        }
      ],
      tableData: [
        {
          id: '和平区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        }
      ],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  computed: {},
  mounted () {
    this.init()
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      // const obj = {
      //   pageNo: this.pageObj.pageNo,
      //   pageSize: this.pageObj.pageSize,
      //   place_type: this.$common.xeUtils.trim(this.searchObj.place_type)
      // }
      // let param = data || obj
      // this.tableLoading = true
      // findrjryList(param).then(ret => {
      //   let data = ret.data
      //   if (data.errcode === 0) {
      //     this.tableLoading = false
      //     this.pageObj.totalRecord = data.data.totalRecord
      //     this.totalnum = data.data.totalRecord
      //     for (let i = 0; i < data.data.results.length; i++) {
      //       data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
      //       data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
      //     }
      //     this.tableData = data.data.results
      //   } else {
      //     this.tableLoading = false
      //     this.error(data)
      //   }
      // })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    ok () {
      this.$Message.info('成功发送预警！')
    },
    cancel () {
      // this.$Message.info('成功发送预警！')
    },
    updateForm () {
      this.modalShow = true
    },
    updateForm01 () {
      this.modalShow01 = true
    },
    handleSpan ({ row, column, rowIndex, columnIndex }) {

    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        margin-top: 10px;
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        /*border-bottom: 1px solid #efefef;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .wx-item {
        display: flex;
        align-items: center;
        padding: 10px;
    }
    .w-header {
        text-align: center;
        display: flex;
        align-items: center;
        margin-left: 20px;
    }
    .wx-header {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .tt {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }
</style>
